<script setup lang="ts">
import { onMounted, ref } from "vue";
import KDGroupList from "./KDGroupList.vue";
import mixprovider from "./mixprovider";
import { KnoDocGroup } from "../../../api/knoDocGroup";
import KDCreate from "../../knoDoc/component/KDCreate.vue";
import KDList from "../../knoDoc/component/KDList.vue";
import { createKnoDoc, KnoDoc } from "../../../api/knoDoc";

const props = defineProps<{
  dialogModel?: boolean;
  dragable?: boolean;
  useDoc?: (doc: KnoDoc) => void;
}>();

const nsViewRef = ref();
const newDocRef = ref();
const kdListRef = ref();

const provider = mixprovider;
const { curNamespace } = provider;
const emit = defineEmits(["useDoc"]);

const onDidCreateNewDoc = async () => {
  // doc.namespace = curNamespace.value.namespace;
  // createKnoDoc(doc);
  kdListRef.value?.reload();
};

const onDocChange = (doc: KnoDoc) => {
  emit("useDoc", doc);
};

const onNsChange = (ns: KnoDocGroup) => {
  curNamespace.value = ns;
};

const dragControllerDiv = () => {
  var resize = document.getElementsByClassName("kdg-resize");
  var left = document.getElementsByClassName("kdg-side");
  var mid = document.getElementsByClassName("kdg-mid");
  var box = document.getElementsByClassName("kdg-warp");
  for (let i = 0; i < resize.length; i++) {
    // 鼠标按下事件
    resize[i].onmousedown = function (e) {
      //颜色改变提醒
      resize[i].style.background = "#818181";
      var startX = e.clientX;
      resize[i].left = resize[i].offsetLeft;
      // 鼠标拖动事件
      document.onmousemove = function (e) {
        var endX = e.clientX;
        var moveLen = resize[i].left + (endX - startX); // （endx-startx）=移动的距离。resize[i].left+移动的距离=左边区域最后的宽度
        var maxT = box[i].clientWidth - resize[i].offsetWidth; // 容器宽度 - 左边区域的宽度 = 右边区域的宽度

        if (moveLen < 150) moveLen = 150; // 左边区域的最小宽度为32px
        if (moveLen > maxT - 150) moveLen = maxT - 150; //右边区域最小宽度为150px

        resize[i].style.left = moveLen; // 设置左侧区域的宽度

        for (let j = 0; j < left.length; j++) {
          left[j].style.width = moveLen + "px";
          mid[j].style.width = box[i].clientWidth - moveLen - 10 + "px";
        }
      };
      // 鼠标松开事件
      document.onmouseup = function (evt) {
        //颜色恢复
        resize[i].style.background = "#d6d6d6";
        document.onmousemove = null;
        document.onmouseup = null;
        resize[i].releaseCapture && resize[i].releaseCapture(); //当你不在需要继续获得鼠标消息就要应该调用ReleaseCapture()释放掉
      };
      resize[i].setCapture && resize[i].setCapture(); //该函数在属于当前线程的指定窗口里设置鼠标捕获
      return false;
    };
  }
};

onMounted(() => {
  if (props.dragable) {
    dragControllerDiv();
  }
});
</script>

<template>
  <el-container class="kdg-warp">
    <el-aside width="200px" class="kdg-side">
      <div class="head">
        <el-text> 命名空间 </el-text>
        <el-button
          type="info"
          text
          icon="Plus"
          @click="nsViewRef.showCreate()"
        />
      </div>
      <KDGroupList ref="nsViewRef" @change="onNsChange" />
    </el-aside>
    <div v-if="dragable" class="kdg-resize" />
    <div v-else class="split-line" />
    <el-container class="kdg-mid">
      <el-header>
        <KDCreate
          ref="newDocRef"
          :namespace="curNamespace?.namespace || ''"
          @submit="onDidCreateNewDoc"
        />
        <el-text>{{ curNamespace?.title }}</el-text>
        <el-space>
          <el-button-group>
            <el-button text icon="Refresh" @click="onDidCreateNewDoc" />
            <el-button
              type="info"
              text
              icon="Plus"
              @click="
                newDocRef.open({
                  namespace: curNamespace?.namespace,
                  embedModel: 'nomic-embed-text:latest'
                })
              "
            />
          </el-button-group>
        </el-space>
      </el-header>
      <el-main>
        <KDList
          ref="kdListRef"
          :key="curNamespace?.namespace"
          :namespace="curNamespace?.namespace"
          :use-doc="props.useDoc"
          @change="onDocChange"
        />
      </el-main>
    </el-container>
  </el-container>
</template>
<style lang="scss" scoped>
.kdg-warp {
  padding: 4px;
  height: 100%;
  // margin: 4px;
  .el-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--el-border-color);
  }
  .kdg-side {
    .head {
      display: flex;
      justify-content: space-between;
      padding: 10px;
    }
    background-color: var(--el-bg-color);
    border-radius: 8px;
  }

  .kdg-mid {
    background-color: var(--el-bg-color);
    border-radius: 8px;
  }

  .kdg-resize {
    cursor: col-resize;
    float: left;
    position: relative;
    top: max(45%, 25rem);
    background-color: #d6d6d6;
    border-radius: 5px;
    margin-top: -10px;
    width: 5px;
    height: 50px;
    background-size: cover;
    background-position: center;
    font-size: 32px;
    color: white;

    &:hover {
      color: #444444;
    }
  }
}

.split-line {
  height: 100%;
  width: 1px;
  background-color: var(--el-bg-color-page);
}
</style>
